<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--{include file='comm/header.tpl'}-->
    <!--{include file='comm/comm_editor.tpl'}-->
    <!--{include file="comm/icheck.tpl"}-->
    <title>商品录入-商品图片</title>
</head>
<style>
.img-left{
	float:left;
	margin-left:12px;
}
.img-delete{
	width:160px;
	height:48px;
	line-height:48px;
	text-align:center;
}

.img-thumbnail{
	width:160px;
	height:160px;
}

#goodsTag{
	padding:18px;
	display:none;
}

.iSort{
	width:82px;
	height:28px;
	line-height:28px;
	padding-left:6px;
	color:gray;
}

</style>
<body>

<div class="container">

    
    <div class="comm_content" style="margin-bottom:48px;">
        	<ul role="tablist" class="nav nav-tabs">
				<li class="group_box tag-1 active">
					<a href="javascript:void(0);">商品图片</a>
				</li>
                <button type="button" class="btn btn-primary" style="float: right;margin:4px 15px 0px 0px;" onclick="history.go(-1)">返回上一级</button>
            </ul>
			
        	<form name="addForm" id="addForm" class="form-horizontal">
        		<!--用于判断是商品添加还是商品编辑-->
        		<input type="hidden" name="postID" id="postID" value="<!--{$list->postID}-->">
        		<div class="goodsMain">
        			<!--{section name=loop loop=5}-->
        				<!--{if $smarty.section.loop.index >= 1}-->
        					<div class="form-group" style="padding:10px;margin-bottom:0px;margin-top:26px;">
        				<!--{else}-->
        					<div class="form-group" style="padding:10px;margin-bottom:0px;">
        				<!--{/if}-->
							<label class="col-sm-3 control-label" for="goods-pictrue" style="width:11%;">
								商品图片<!--{$smarty.section.loop.index+1}-->：
							</label>
							<div class="col-sm-9" style="width:89%;">
								<div class="img-left">
									<img class="img-thumbnail" name="img_big_<!--{$smarty.section.loop.index+1}-->" src="/quanliadmin/docroot/images/backend/default.jpg">
									<input type="hidden" name="imgname_big_<!--{$smarty.section.loop.index+1}-->">
									<div class="img-delete" style="line-height:42px;">
										<div>大小：960 x 960</div>
									</div>
								</div>
								
								<div class="img-left">
									<img class="img-thumbnail" name="img_middle_<!--{$smarty.section.loop.index+1}-->" src="/quanliadmin/docroot/images/backend/default.jpg">
									<input type="hidden" name="imgname_middle_<!--{$smarty.section.loop.index+1}-->">
									<div class="img-delete" style="line-height:42px;">
										<div>大小：480 x 480</div>
										
									</div>
								</div>
								
								<div class="img-left">
									<img class="img-thumbnail" name="img_list_<!--{$smarty.section.loop.index+1}-->" src="/quanliadmin/docroot/images/backend/default.jpg">
									<input type="hidden" name="imgname_list_<!--{$smarty.section.loop.index+1}-->">
									<div class="img-delete" style="line-height:42px;">
										<div>大小：216 x 216</div>
										
									</div>
								</div>
								
								<div class="img-left">
									<img class="img-thumbnail" name="img_small_<!--{$smarty.section.loop.index+1}-->" src="/quanliadmin/docroot/images/backend/default.jpg">
									<input type="hidden" name="imgname_small_<!--{$smarty.section.loop.index+1}-->">
									<div class="img-delete" style="line-height:42px;">
										<div>大小：100 x 100</div>
										
									</div>
								</div>
								<div class="img-left" style="margin-top:40px;">
									<div>
										<button type="button" class="btn btn-default" name="cover_<!--{$smarty.section.loop.index+1}-->">设为封面</button>
									</div>
									<div style="margin-top:18px;">
										<input type="text" class="iSort" value="请输入排序" name="iSort_<!--{$smarty.section.loop.index+1}-->" disabled>
									</div>
								</div>
								<div style="clear:both;"></div>
							</div>
						</div>
					<!--{/section}-->
				</div>
				<input type="hidden" name="cover" value="">
	        </form>
        </div>
   

</div>
<!--{include file='comm/footer.tpl'}-->
</body>
</html>
<script>

$(function(){
	//图片排序
	$('[name*=iSort_]').focus(function(){
		$(this).css('color','black');
		var sort = E.trim($(this).val());
		if (sort == '请输入排序') {
			$(this).val('');
		}
	}).blur(function(){
		var sort = E.trim($(this).val());
		if (sort == '') {
			$(this).css('color','gray');
			$(this).val('请输入排序');
		} else if (!E.isInt(sort) || sort <= 0) {
			$(this).css('color','gray');
			$(this).val('请输入排序');
			E.alert('图片排序必须为大于0的正整数');
		} else {
			//检查排序是否已存在
			var iSort_count = 0;
			$('[name*=iSort_]').each(function(k, v){
				var iSort = parseInt($(this).val());
				if (iSort == sort) {
					iSort_count++;
				}
			});
			
			if (iSort_count >= 2) {
				$(this).css('color','gray');
				$(this).val('请输入排序');
				E.alert('图片排序「' + sort + '」已存在');
			}
		}
	});
	
	<!--{if $goods_picture}-->
		<!--{foreach from=$goods_picture key=k item=picture}-->
			$('[name=img_big_'+<!--{$k+1}-->+']').attr('src', '<!--{$picture.p_big}-->');
			$('[name=imgname_big_'+<!--{$k+1}-->+']').val('<!--{$picture.o_big}-->');
			
			$('[name=img_middle_'+<!--{$k+1}-->+']').attr('src', '<!--{$picture.p_middle}-->');
			$('[name=imgname_middle_'+<!--{$k+1}-->+']').val('<!--{$picture.o_middle}-->');
			
			$('[name=img_list_'+<!--{$k+1}-->+']').attr('src', '<!--{$picture.pictureLink}-->');
			$('[name=imgname_list_'+<!--{$k+1}-->+']').val('<!--{$picture.orgitalLink}-->');
			
			$('[name=img_small_'+<!--{$k+1}-->+']').attr('src', '<!--{$picture.p_small}-->');
			$('[name=imgname_small_'+<!--{$k+1}-->+']').val('<!--{$picture.o_small}-->');
			
			$('[name=iSort_'+<!--{$k+1}-->+']').val('<!--{$picture.sortOrder}-->');
			<!--{if $picture.mainFlg == 1}-->
				$('[name=cover_'+<!--{$k+1}-->+']').removeClass('btn-default').addClass('btn-danger');
				$('[name=cover]').val(<!--{$k+1}-->);
			<!--{/if}-->
		<!--{/foreach}-->
	<!--{/if}-->
});

var goodsAdd = {
	
	//删除图片，恢复默认
	clear: function(c, p){
		$('[name=img_' + c + '_' + p + ']').attr('src', '/quanliadmin/docroot/images/backend/default.jpg');
		$('[name=imgname_' + c + '_' + p + ']').val('');
		$('[name=cover_' + p + ']').removeClass('btn-danger').addClass('btn-default');
		var cover = $('[name=cover]').val();
		if (parseInt(p) == parseInt(cover)) {
			$('[name=cover]').val('');
		}
	},
	
	//设置封面
	setCover: function(p){
		var big = $('[name=imgname_big_' + p + ']').val();  
		var middle = $('[name=imgname_middle_' + p + ']').val(); 
		var list = $('[name=imgname_list_' + p + ']').val(); 
		var small = $('[name=imgname_small_' + p + ']').val();
		if (big == '' || big == null || big == undefined) {
			E.alert('商品图片'+p+'：960 x 960大小的图片未上传');
			return false;
		}
		if (middle == '' || middle == null || middle == undefined) {
			E.alert('商品图片'+p+'：480 x 480大小的图片未上传');
			return false;
		}
		if (list == '' || list == null || list == undefined) {
			E.alert('商品图片'+p+'：216 x 216大小的图片未上传');
			return false;
		}
		if (small == '' || big == small || small == undefined) {
			E.alert('商品图片'+p+'：100 x 100大小的图片未上传');
			return false;
		}
		
		for(var i=1; i<=5; i++) {
			if (i != p) {
				$('[name=cover_' + i + ']').removeClass('btn-danger').addClass('btn-default');
			}
		}
		$('[name=cover_' + p + ']').removeClass('btn-default').addClass('btn-danger');
		$('[name=cover]').val(p);
	},
	
	//保存商品图片
	save: function(){
		var is_upload = 0;
		for(var i=1; i<=5; i++) {
			var big = $('[name=imgname_big_' + i + ']').val();  
			var middle = $('[name=imgname_middle_' + i + ']').val(); 
			var list = $('[name=imgname_list_' + i + ']').val(); 
			var small = $('[name=imgname_small_' + i + ']').val();
			
			if (big == '' && middle == '' && list == '' && small == '') {
				continue;
			} else {
				if (big == '' || big == null || big == undefined) {
					E.alert('商品图片' + i + '：960 x 960大小的图片未上传');
					return false;
				}
				if (middle == '' || middle == null || middle == undefined) {
					E.alert('商品图片' + i + '：480 x 480大小的图片未上传');
					return false;
				}
				if (list == '' || list == null || list == undefined) {
					E.alert('商品图片' + i + '：216 x 216大小的图片未上传');
					return false;
				}
				if (small == '' || big == small || small == undefined) {
					E.alert('商品图片' + i + '：100 x 100大小的图片未上传');
					return false;
				}
				
				//检查排序
				var iSort = $('[name=iSort_' + i + ']').val();
				if (!E.isInt(iSort) || iSort <= 0) {
					E.alert('商品图片' + i + '：排序未填写');
					return false;
				}
				
				is_upload++;
			}
		}
		
		if (is_upload == 0) {
			E.alert('请上传商品图片');
			return false;
		}
		
		//检查封面设置
		var cover = $('[name=cover]').val();
		if (cover != 1 && cover != 2 && cover != 3 && cover != 4 && cover != 5) {
			E.alert('请选择封面设置');
			return false;
		}

		E.loadding.open();
		this.dt = E.getFormValues('addForm');
		E.ajax_post({
			url : '/invokingAjax-backend/goods/goodsAdd.ajax?operFlg=11',
			data: {
				params: this.dt
			},
			call: 'goodsAdd.call'
		});
	},
	
	//上传后回调
	call: function(o){
		E.loadding.close();
		if (o.code == 200) {
			E.alert(o.message, 2);
		} else {
			E.alert(o.message);
		}
	}
}

//绑定上传图片
KindEditor.ready(function(K) {
    var editor = K.editor({
        allowFileManager : true,
        uploadJson: '/framework/kindeditor/php/upload_json.php'
    });

    $(document).on('click', '.upload_img', function() {

        var o = $(this);
        var p = o.attr('parent');
        var c = o.attr('child');

        editor.loadPlugin('image', function() {
            editor.plugin.imageDialog({
                showRemote : false,
                clickFn : function(url) {
					
                   //对url进行操作
                	var urlArray = url.split('/');
                	var urlCount = urlArray.length;
                	var urlTime = urlCount - 2;
                	var urlPath = urlCount - 1;
                	var name = urlArray[urlTime] + '/' + urlArray[urlPath];			

		            $('[name=img_' + c + '_' + p + ']').attr('src', url);
			        $('[name=imgname_' + c + '_' + p + ']').val(name);    
                    editor.hideDialog();
                }
            });
        });
    });
});
</script>